{extend name="public:base" /}


{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <a type="button" class="btn btn-primary btn-lg" style="color: #FFFFFF" href="{:url('/admin/system/doMenu', ['level' => input('level'), 'pid' => input('pid')])}">新增</a>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">排序</button>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="iconfont icon-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                {if (input('level') == 2)}
                                <th>图标</th>
                                {/if}
                                <th>菜单名</th>
                                {if (input('level') > 2)}
                                <th>上级菜单</th>
                                {/if}
                                {if (input('level') == 3 || input('level') == 4)}
                                <th>URL</th>
                                {/if}
                                <th>排序</th>
                                {if (input('level') < 4)}
                                <th>隐藏</th>
                                {/if}
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="list"}
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                {if (input('level') == 2)}
                                <td><i class="iconfont {$vo.icon ? $vo.icon : 'icon-list'}"></i></td>
                                {/if}
                                <td>
                                    {if ($vo.level < 4)}
                                    <a href="{:url('/admin/system/menuList', ['level' => $vo['level']+1, 'pid' => $vo['id']])}">{$vo.name}</a>
                                    {else /}
                                    {$vo.name}
                                    {/if}
                                </td>
                                {if (input('level') > 2)}
                                <td>{$vo.pid|getParentMenuName}</td>
                                {/if}
                                {if (input('level') == 3 || input('level') == 4)}
                                <td>{$vo.url}</td>
                                {/if}
                                <td>{$vo.sort}</td>
                                {if (input('level') < 4)}
                                <td>{$vo.is_show == 1 ? '否' : '是'}</td>
                                {/if}
                                <td class="project-actions">
                                    {if ($vo['id'] > 3)}
                                    <a href="{:url('doMenu', ['pid' => input('pid'),'id' => $vo['id'], 'level' => input('level')])}" class="btn btn-white btn-sm"><i class="iconfont icon-edit"></i> 编辑 </a>
                                    <a href="{:url('delMenu', ['pid' => input('pid'),'id' => $vo['id'], 'level' => input('level')])}" class="btn btn-white btn-sm ajax-del"><i class="iconfont icon-trash"></i> 删除 </a>
                                    {/if}
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">排序</h4>
            </div>
            <div class="modal-body">
                <div id="list">
                    {volist name="list" id="vo"}
                    <div data-id="{$vo.id}">{$vo.name}</div>
                    {/volist}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveSort()">更新排序</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="__ADMIN__/js/Sortable.js"></script>
<script>
    (function () {
        //文字拖拽
        Sortable.create(document.getElementById('list'), {
            animation: 150,
            //onAdd,onUpdate,onRemove,onStart,onSort,onEnd
            onUpdate: function (evt){
                var oldIndex = evt.oldIndex;
                var newIndex = evt.newIndex;
                console.log(oldIndex);
                console.log(newIndex)
            }
        });
    })();

    /**
     * 更新排序
     * */
    function saveSort()
    {
        var divObj = $('#list > div');
        if(divObj.length > 0){
            var sortObj = [];
            divObj.each(function (index, val){
                var id = val.dataset.id;

                var sortObjSingle = {};
                sortObjSingle.id = id;
                sortObjSingle.sort = index;
                sortObj[index] = sortObjSingle;
            })
            var url = "/admin/system/saveSort";

            $.post(url, {
                sortObj: JSON.stringify(sortObj)
            }, function (res){
                if(res.result == 1){
                    layer.msg(res.msg);
                    setTimeout(function (){
                        window.location.href = window.location.href
                    },res.timer)
                }else{
                    layer.msg(res.msg)
                }
            },'json')
        }
    }
</script>
{/block}



